<template>
    <view class="phone-s">
        <view class="phone" :style="phoneSize" ref="contextMenuTarget" >
            <view v-show="showComponentPreview" class="tip-content-show">
                <view class="tip-content-show-content">
                    <template v-if="componentPreviewName !== 'myComponent'">
                        <component :is="componentPreviewName"></component>
                    </template>
                    <template v-if="componentPreviewName === 'myComponent'">
                        <my-components-entity :list="myComponentPreviewData"></my-components-entity>
                    </template>
                </view>
            </view>
            <view class="phone-top">
                <view style="flex: 1"><i class="el-icon-more"></i>&nbsp;无服务</view>
                <view style="flex: 1;text-align: center">{{time}}</view>
                <view style="flex: 1;text-align: right"><i class="el-icon-chat-round"></i></view>
            </view>
            <view class="phone-top-blok">
            </view>
            <draggable group="layouts" :list="list"
                       :options="{
                   }"
                       @change="draggableChange"
                       :style="[computedClassToStyle(phoneClass),phoneStyle]"
                       style="position: absolute;top: 25px;bottom: 0;left: 0;right: 0"
                       handle=".flex-draggalbe-handle"
            >
                <template v-for="(item,index) in list">
                    <component :key="index" :is="item.componentName"
                               :dataIIndex="index + ''"
                               v-bind="item"
                    ></component>
                </template>
            </draggable>


        </view>
        <vue-context-menu class="right-menu"
                          :target="contextMenuTarget"
                          :show="contextMenuVisible"
                          @update:show="contextMenuVisibleFun">
            <a href="javascript:" @click="deleteDataIndex">删除</a>
        </vue-context-menu>
    </view>
</template>

<script>
    import draggable from '@/common/js/vuedraggable'
    import basicsMixin from '@/common/js/importBasics'
    import Iflex from '@/components/basics/Iflex'
    //TODO 本地引用了vue-context-menu，添加一项鼠标右键时顶层元素点输出。解决在拖拽区域内右键删除非布局元素时无法定位到具体的元素问题
    import { component as VueContextMenu } from '@/common/js/vue-context-menu'
    import MyComponentsEntity from '../LeftComponents/ComponentContainer/MyComponents/MyComponentsEntity'

    export default {
        mixins: [basicsMixin],
        name: 'PhoneFrame',
        props:{
        },
        watch: {
        },
        data(){
            return {
                contextMenuTarget: undefined,
                contextMenuVisible: false,
                dragging: false,
                time: ''
            }
        },
        mounted(){
            this.contextMenuTarget = this.$refs.contextMenuTarget.$el
        },
        created(){
            this.startTime()
        },
        methods:{
            checkBackground(){
                alert(1)
            },
            contextMenuVisibleFun({show,dataset}){
                if (dataset && dataset['iIndex'] !== undefined){
                    this.$store.commit('setCurrentCheckIndex',{index:dataset['iIndex']})
                }else {
                    // 避免点击布局元素高亮处后，鼠标又移至背景面板而右键删除的不合理
                    this.$store.commit('setCurrentCheckIndex',{index:''})
                }
                this.contextMenuVisible = show
            },
            deleteDataIndex(){
                // do delete action
                if (this.$store.state.currentCheckAttr.currentCheckIndex === ''){
                    this.$notify({
                        title: '请先选取元素!',
                        message: '右键删除请将鼠标移至元素，布局内若有元素，优先删除布局内元素。若要删除布局元素，请将鼠标移至布局元素上方高亮处再右键。',
                        type: 'warning'
                    });
                }else {
                    this.$store.dispatch('deleteCurrentCheckeAttr')
                }
                this.contextMenuVisibleFun(false)
            },
            getTime(){
                let now = new Date()
                let h = now.getHours();h = h < 10 ? ('0'+ h) : h
                let m = now.getMinutes();m = m < 10 ? ('0' + m ) : m
                this.time = h + ':' + m
            },
            startTime(){
                this.getTime()
                setInterval(()=>{
                    this.getTime()
                },30000)
            },
            computedClassToStyle(classNames){
                let style = {}
                classNames.forEach(e=>{
                    style = {...style,...this.customClass[e]}
                })
                return style
            },
            /**
             * 会和另一个重复执行2遍，TODO 暂时没想到什么好的解决方法
             * @param e
             */
            draggableChange(e){
                this.$store.dispatch('cachesFolder')
            }
        },
        computed:{
            myComponentPreviewData(){
                return this.$store.state.myComponentPreviewData
            },
            componentPreviewName(){
                return this.$store.state.componentPreviewName
            },
            showComponentPreview(){
                return this.$store.state.showComponentPreview
            },
            customClass(){
                return  this.$store.state.currentCheckAttr.customClass
            },
            phoneClass(){
                switch (this.$store.state.pattern) {
                    case 'page':
                        return this.$store.state.project.checkFile.fileStyleAndClass.iClass
                    default:
                        return []
                }
            },
            phoneSize(){
                let rote = this.$store.state.phoneSize / 100
                return {
                    // zoom: rote,
                    transform: `scale(${rote})`,
                    top: `${this.$store.state.phoneSize - 100}%`
                }
            },
            phoneStyle(){
                switch (this.$store.state.pattern) {
                    case 'page':
                        return this.$store.state.project.checkFile.fileStyleAndClass.iStyle
                    default:
                        return {}
                }
            },
            /*list:{
              get() {
                  return this.$store.state.list
              },
              set(value){
                  this.$store.commit('setGlobalList',{list:value})
              }
            }*/
            list:{
                get() {
                    switch (this.$store.state.pattern) {
                        case 'page':
                            return this.$store.state.project.checkFile.dragList
                        case 'component':
                            return this.$store.state.patternComponents.list
                    }
                },
                set(value){
                    switch (this.$store.state.pattern) {
                        case 'page':
                            this.$store.commit('setCheckFileDragList',value)
                            break
                        case 'component':
                            this.$store.commit('setPatternComponentslList',value)
                            break
                    }
                }
            }
        },
        components:{
            draggable,
            Iflex,
            VueContextMenu,
            MyComponentsEntity
        }
    }
</script>

<style lang="scss">

    $phoneWidth: 375px;
    $phoneHeight: 667px;
    $rote: 0.2;

    $windowsWidth: $phoneWidth / 0.2;

    $onePx: $windowsWidth / 750 * 0.2;

    .phone-s{
        width: $phoneWidth;
        height: $phoneHeight;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .phone{
        width: $phoneWidth;
        height: $phoneHeight;
        background-color: white;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        overflow: scroll;
    }

    .sortable-fallback{
        display: none;
    }

    .phone-top{
        height: 25px;
        width: 100%;
        background-color: black;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #aeb1b7;
        justify-content: space-between;
        padding: 0 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 12px;

        i {
            color: rgb(174, 177, 183);
            font-weight: 600;
        }
    }
    .phone-top-blok{
        height: 25px;
        width: 100%;
    }


    a {
        color: #333;
    }
    .right-menu {
        position: fixed;
        background: #fff;
        border: solid 1px rgba(0, 0, 0, .2);
        border-radius: 3px;
        z-index: 999999;
        display: none;
    }
    .right-menu a {
        width: 100px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        display: block;
        padding: 0 10px;
        color: #1a1a1a;
    }
    .right-menu a:hover {
        background: #eee;
        color: #fff;
    }
    .right-menu {
        border: 1px solid #eee;
        box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
        border-radius: 1px;
        flex-direction: column;
    }
    a {
        text-decoration: none;
    }
    .right-menu a {
        padding: 2px;
    }
    .right-menu a:hover {
        background: #42b983;
    }
    path {
        fill: black;
    }



    .tip-content-show{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 375px;
        box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
        z-index: 9999;
        background-color: white;
        border: rgba(169, 169, 173, 0.96) solid 2px;
    }
    .tip-content-show-content{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
</style>
